<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <div id="box">box</div> -->
    <div class="box one">01</div>
    <div class="box two">02</div>
    <div class="box">03</div>
    <div class="box">04</div>
    <div class="box">05</div>
    <div class="box">06</div>
    <div class="box">07</div>
    <div class="box">08</div>
    <div class="box">09</div>
    <div class="box">10</div>

    唱:<input type="radio" name="hobby" value="sing">
    跳:<input type="radio" name="hobby" value="dance">
    篮球:<input type="radio" name="hobby" value="basketball">
    学习:<input type="radio" name="hobby" value="study">
</body>
<script>
    // 1. 在文档中通过 id名 class名 标签名 name属性 获取元素
    // document.getElementById()         => 存在就返回元素  不存在 => null
    // document.getElementsByClassName() => 存在就返回元素的集合  不存在 => []
    // document.getElementsByTagName()   => 存在就返回元素的集合  不存在 => []
    // document.getElementsByName()      => 存在就返回元素的集合  不存在 => []

    // 操作元素时 需要先将元素从数组中取出


    // console.log(document.getElementById("box"));

    // var boxList = document.getElementsByClassName("box");
    // console.log(boxList[0]);

    // var divList = document.getElementsByTagName("div");
    // console.log(divList);

    // var hobbyList = document.getElementsByName("hobby");
    // console.log(hobbyList);
    // console.log(hobbyList[0].value);


</script>

</html>